<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<!-- 适配状态栏 -->
		<view class="status_bar"></view>
		<!-- #endif -->

		<view class="search_style" :style="notTop? 'top:unset':''">
			<view class="search flex flex_col_center" @click="searchPage">
				<text class="custom-icon custom-icon-chazhao"></text>
				<!-- <text class="key gray_font">搜索</text> -->
			</view>
			<view class="vivio" @click="searchgo">
				<image  src="../../static/image/voice.png" mode=""></image>
			</view>
		</view>
		<view class="search_height"></view>
	</view>

</template>

<script>
	export default {
		props: ['from', 'zid', 'notTop'], //notTop:这里默认是搜索在页面最上方，设置了高度。还有搜索框不在最上方的情况
		methods: {
			searchPage() {
				uni.navigateTo({
					url: `/pages/index/search?from=${this.from}&zid=${this.zid}`
				})
			},
			searchgo(){
				uni.navigateTo({
					url:'/pages/catalogue/catalogue_list'
				})
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #F6F6F7;
		height: var(--status-bar-height);
		z-index: 1000;
	}

	.search_style {
		position: fixed;
		// #ifndef MP-WEIXIN
		top: var(--status-bar-height);
		//#endif
		left: 0;
		right: 0;
		z-index: 9;
		background: #F6F6F7;
		padding: 0 34rpx;
		display: flex;
		align-items: center;
		.search {
			border-radius: 40px;
			background: #F0F1F3;
			padding: 0 38rpx;
			box-sizing: border-box;
			height: 60rpx;
			margin: 40rpx 0rpx;
			flex: 1;
		}

		.key {
			margin-left: 5px;
		}
	}

	.search_height {
		height: 134rpx;
	}
    
	.vivio {
		width:60rpx;
		height: auto;
		margin-left: 20rpx;
	}
	.vivio image{
		width: 35rpx;
		height: 40rpx;
		display: block;
		margin: 0 auto;
	}
</style>
